<template>
    <div id="amentpage">
         <mt-header title="账号设置" >
            <router-link to="/index" slot="left">
                <mt-button icon="back">返回</mt-button>
            </router-link>           
        </mt-header>
        <div class="amentpage" style="position:relative;z-index:1">
            <ul>
                <li>
                    <p><el-button class="btn" type="text" @click="open4">{{jurisdiction}}</el-button>
                        <span class="boult" @click="open4">></span>
                    </p>
                </li>
                <li>
                    <p><el-button class="btn" type="text" @click="open5">{{amentPortrait}}</el-button>
                        <span class="boult"  @click="open5">></span>
                    </p>
                </li>
                <li>
                    <p> <el-button type="text" @click="isAmentPassword" class="btn">{{amentPassword}}</el-button>
                        <span class="boult" @click="isAmentPassword">></span>
                    </p> 
                </li>
            </ul>
             <div v-show="isShow" style="position:absolute;background:rgba(0,0,0,0.1);z-index:100;width:100%;height:650px;top:0px;left: 0px;">
                  <ament-portrait @setdata="getdata"></ament-portrait>
             </div>
        </div>
    </div>
</template>
<script>
import AmentPortrait from './AmentPortrait'
import AmentPhoto from './AmentPhoto'

    export default{
        data(){
            return {
                i:[],
                jurisdiction:"权限设置",
                amentPortrait:'修改头像',
                amentPassword:'修改密码',
                isShow:false
            }
        },
           methods: {
                open4() {
                    const h = this.$createElement;
                    this.$msgbox({
                    title: '权限设置',
                    message: h('p', null, [
                        h('span', null, '内容可以是 '),
                        h('i', { style: 'color: red' }, 'VNode')
                    ]),
                    showInput:true,  
                    showInput:true,                 
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    center:true,
                    // type:'info',
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {
                        instance.confirmButtonLoading = true;
                        instance.confirmButtonText = '执行中...';
                        setTimeout(() => {
                            done(console.log(2222));
                            setTimeout(() => {
                            instance.confirmButtonLoading = false;
                            }, 300);
                        }, 3000);
                        } else {
                        done(console.log(33333));
                        }
                    }
                    }).then(action => {
                    this.$message({
                        type: 'info',
                        message: 'action: ' + action
                    });
                    });
                },
                //控制修改密码显示
                getdata(res){
                    this.isShow=res;
                },
                // 修改头像
                 open5() {
                    const h = this.$createElement;
                    this.$msgbox({
                    title: '修改头像',
                    message: h('p', null, [
                        h('ament-photo',null,),
                    ]),                
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    center:true,
                    // type:'info',
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {
                        instance.confirmButtonLoading = true;
                        instance.confirmButtonText = '执行中...';
                        setTimeout(() => {
                            done(console.log(2222));
                            setTimeout(() => {
                            instance.confirmButtonLoading = false;
                            }, 300);
                        }, 3000);
                        } else {
                        done(console.log(33333));
                        }
                    }
                    }).then(action => {
                    this.$message({
                        type: 'info',
                        message: 'action: ' + action
                    });
                    });
                },
                isAmentPassword(){
                        this.isShow=true;
                },
                },
                components:{
                    AmentPortrait,
                    AmentPhoto
                }
    }
</script>
<style>
    #amentpage{
       background: #eee; 
        height:800px;
    } 
    #amentpage .amentpage li{
        height:100px;
        background: #fff;
        margin-top:20px;
    }
    #amentpage .amentpage li p{
        text-align: left;
        line-height: 100px;
        margin-left: 30px;
        /* border: 1px solid red; */
    }
     #amentpage .amentpage li p span.boult{
         display: inline-block;
         margin-right:20px;
         float:right;
         font-size: 25px;
     }
     .el-message-box {
            width:90%;
     }
     .el-message-box__btns button:nth-child(2){
         margin-left:20%;
     }

</style>
